import { exclusiveList } from './dataList'
// 全局配置表单项
const globalConfig = {
    rows: 1,
    list: [
        {
            label: '类型选择',
            type: 'radio',
            prop: 'type',
            optionsList: exclusiveList.map(item => ({
                label: item.label,
                id: item.name,
                defaultOptions: item.defaultOptions
            }))
        },
        {
            type: "render",
            prop: "",
            render: (h, { self, model, formModel }) => {
                return (
                    <el-button { ...{ on: {
                        click: () => {
                            self.$emit('seeJson')
                        }
                    } } } type="text">查看JSON</el-button>
                );
            },
        },
    ]
}
import { titleTextStyle, tooltipAxisPointer, tooltipAxisPointerLabel } from './configList'
// 左侧配置项
const leftConfig = [
    {
        title: '通用配置-TITLE(标题)',
        name: 'title',
        formConfig: {
            labelWidth: 140,
            rows: 1,
            list: [
                {
                    type: "render",
                    prop: "",
                    render: (h, { self, model, formModel }) => {
                        return (
                            <div>
                                <el-divider content-position="left">
                                    <strong>标题相关配置</strong>
                                </el-divider>
                            </div>
                        );
                    },
                },
                {
                    label: '是否显示',
                    type: 'switch',
                    prop: 'title.show',
                },
                {
                    type: "render",
                    prop: "",
                    render: (h, { self, model, formModel }) => {
                        return (
                            <div>
                                <el-divider content-position="left">
                                    <strong>主文本标题</strong>
                                </el-divider>
                            </div>
                        );
                    },
                },
                {
                    label: '标题',
                    type: 'input',
                    prop: 'title.text',
                },
                {
                    label: '绑定链接',
                    type: 'input',
                    prop: 'title.link',
                },
                {
                    label: '跳转方式',
                    type: 'radio',
                    prop: 'title.target',
                    defaultValue: [],
                    optionsList: [
                        {
                            label: "当前窗口打开",
                            id: "self",
                        },
                        {
                            label: "新窗口打开",
                            id: "blank",
                        },
                    ],
                },
                ...titleTextStyle('title.textStyle.'),
                {
                    type: "render",
                    prop: "",
                    render: (h, { self, model, formModel }) => {
                        return (
                            <div>
                                <el-divider content-position="left">
                                    <strong>副文本标题</strong>
                                </el-divider>
                            </div>
                        );
                    },
                },
                {
                    label: '标题',
                    type: 'input',
                    prop: 'title.subtext',
                },
                {
                    label: '绑定链接',
                    type: 'input',
                    prop: 'title.sublink',
                },
                {
                    label: '跳转方式',
                    type: 'radio',
                    prop: 'title.subtarget',
                    defaultValue: [],
                    optionsList: [
                        {
                            label: "当前窗口打开",
                            id: "self",
                        },
                        {
                            label: "新窗口打开",
                            id: "blank",
                        },
                    ],
                },
                ...titleTextStyle('title.subtextStyle.'),
                {
                    type: "render",
                    prop: "",
                    render: (h, { self, model, formModel }) => {
                        return (
                            <div>
                                <el-divider content-position="left">
                                    <strong>以下是主文本标题和副文本标题共有属性</strong>
                                </el-divider>
                            </div>
                        );
                    },
                },
                {
                    label: '水平对齐',
                    prop: `title.textAlign`,
                    type: 'select',
                    filterable: true,
                    tooltip: {
                        content: `整体（包括 text 和 subtext）的水平对齐。`
                    },
                    optionsList: [
                        {
                            label: 'auto',
                            id: 'auto'
                        },
                        {
                            label: 'left',
                            id: 'left'
                        },
                        {
                            label: 'right',
                            id: 'right'
                        },
                        {
                            label: 'center',
                            id: 'center'
                        },
                    ]
                },
                {
                    label: '垂直对齐',
                    prop: `title.textVerticalAlign`,
                    type: 'select',
                    filterable: true,
                    tooltip: {
                        content: `整体（包括 text 和 subtext）的垂直对齐。`
                    },
                    optionsList: [
                        {
                            label: 'auto',
                            id: 'auto'
                        },
                        {
                            label: 'top',
                            id: 'top'
                        },
                        {
                            label: 'bottom',
                            id: 'bottom'
                        },
                        {
                            label: 'middle',
                            id: 'middle'
                        },
                    ]
                },
                {
                    label: '是否触发事件',
                    prop: `title.triggerEvent`,
                    type: 'switch',
                },
                {
                    label: '间距',
                    prop: `title.itemGap`,
                    type: 'number',
                    defaultValue: 10,
                    tooltip: {
                        content: `主副标题之间的间距。`
                    },
                },
                {
                    label: '离左侧距离',
                    prop: `title.left`,
                    type: 'select',
                    defaultValue: 'auto',
                    tooltip: {
                        content: `
                        title 组件离容器左侧的距离。

left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。

如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。
                        `
                    },
                    optionsList: [
                        {
                            label: 'left',
                            id: 'left'
                        },
                        {
                            label: 'center',
                            id: 'center'
                        },
                        {
                            label: 'right',
                            id: 'right'
                        }
                    ]
                },
                {
                    label: '离上侧距离',
                    prop: `title.top`,
                    type: 'select',
                    defaultValue: 'auto',
                    tooltip: {
                        content: `
                        title 组件离容器上侧的距离。

top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。

如果 top 的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。
                        `
                    },
                    optionsList: [
                        {
                            label: 'top',
                            id: 'top'
                        },
                        {
                            label: 'middle',
                            id: 'middle'
                        },
                        {
                            label: 'bottom',
                            id: 'bottom'
                        }
                    ]
                },
                {
                    label: '标题背景色',
                    prop: `title.backgroundColor`,
                    type: 'colorPicker',
                    defaultValue: `rgba(255,255,255,0)`
                },
                {
                    label: '边框颜色',
                    prop: `title.borderColor`,
                    type: 'colorPicker',
                    defaultValue: `#ccc`,
                    tooltip: {
                        content: `标题的边框颜色。支持的颜色格式同 backgroundColor。`
                    },
                },
                {
                    label: '边框线宽',
                    prop: `title.borderWidth`,
                    type: 'number',
                    defaultValue: 0
                },
                {
                    label: '模糊大小',
                    prop: `title.shadowBlur`,
                    type: 'number',
                    defaultValue: 10
                },
                {
                    label: '阴影颜色',
                    prop: `title.shadowColor`,
                    type: 'colorPicker',
                    defaultValue: `rgba(0, 0, 0, 0.5)`,
                },
                {
                    label: '水平方向上的偏移',
                    prop: `title.shadowOffsetX`,
                    type: 'number',
                },
                {
                    label: '垂直方向上的偏移',
                    prop: `title.shadowOffsetY`,
                    type: 'number',
                },
            ]
        }
    },
    {
        title: '通用配置-LEGEND(图例组件)',
        name: 'legend',
        formConfig: {
            labelWidth: 140,
            rows: 1,
            list: [
                {
                    type: "render",
                    prop: "",
                    render: (h, { self, model, formModel }) => {
                        return (
                            <div>
                                <el-divider content-position="left">
                                    <strong>图例组件相关配置</strong>
                                </el-divider>
                            </div>
                        );
                    },
                },
                {
                    label: '是否显示',
                    type: 'switch',
                    prop: 'legend.show',
                },
                {
                    label: '左侧的距离',
                    prop: `legend.left`,
                    type: 'select',
                    filterable: true,
                    tooltip: {
                        content: `left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。`
                    },
                    optionsList: [
                        {
                            label: 'left',
                            id: 'left'
                        },
                        {
                            label: 'center',
                            id: 'center'
                        },
                        {
                            label: 'right',
                            id: 'right'
                        }
                    ]
                },
                {
                    label: '上侧的距离',
                    prop: `legend.top`,
                    type: 'select',
                    filterable: true,
                    tooltip: {
                        content: `top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。`
                    },
                    optionsList: [
                        {
                            label: 'top',
                            id: 'top'
                        },
                        {
                            label: 'middle',
                            id: 'middle'
                        },
                        {
                            label: 'bottom',
                            id: 'bottom'
                        }
                    ]
                },
            ]
        }
    },
    {
        title: '通用配置-TOOLTIP(提示框组件)',
        name: 'tooltip',
        formConfig: {
            labelWidth: 140,
            rows: 1,
            list: [
                {
                    type: "render",
                    prop: "",
                    render: (h, { self, model, formModel }) => {
                        return (
                            <div>
                                <el-divider content-position="left">
                                    <strong>提示框组件相关配置</strong>
                                </el-divider>
                            </div>
                        );
                    },
                },
                {
                    label: '是否显示',
                    type: 'switch',
                    prop: 'tooltip.show',
                    defaultValue: true
                },
                ...tooltipAxisPointer('tooltip.axisPointer.'),
                ...tooltipAxisPointerLabel('tooltip.axisPointer.label.'),
            ]
        }
    },
]
// 右侧配置项
const rightConfig = {
    rows: 1,
    list: [
        {
            label: '标题',
            type: 'input',
            prop: 'title.text',
        },
    ]
}

export { globalConfig, leftConfig, rightConfig }